#{extends 'main.html' /} 
#{set title:messages.get("view.deal") /} 
#{set moreOptions:"onload='initialize()' " /}
        	
<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

	function initialize() {
		
		var locations = [
              ['<p><b>${deal.title}</b></p><p> ${deal.description}</p>', ${deal.latitude}, ${deal.longitude}, 1]
        ];

	    var map = new google.maps.Map(document.getElementById('map_canvas'), {
	      zoom: 14,
	      center: new google.maps.LatLng(${deal.latitude}, ${deal.longitude}),
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    });
	
	    var infowindow = new google.maps.InfoWindow();
	
	    var marker, i;
	
	    for (i = 0; i < locations.length; i++) {  
	      marker = new google.maps.Marker({
	        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	        map: map
	      });
	
	      google.maps.event.addListener(marker, 'click', (function(marker, i) {
	        return function() {
	          infowindow.setContent(locations[i][0]);
	          infowindow.open(map, marker);
	        }
	      })(marker, i));
	    }
	}
</script>
<h1>&{'deal.text'}: ${deal.title}</h1>

#{ifnot deal}
<p>&{'deal.not.found'}</p>
#{/ifnot} #{else}
 
  <div class="dealWrapper">
    <table>
        <tr>
            <td class="dealLeft">
            <div class="dealPrice"><span class="price">&{'view.deal.discount.price'}:</span>${deal.discountPrice} &euro;</div>
                <div><span class="price">&{'view.deal.original.price'}:</span>${deal.oldPrice} &euro;</div>
                <div><span>&{'view.deal.from'}:</span>${deal.startDate.format()}</div>
                <div><span>&{'view.deal.to'}:</span>${deal.endDate.format()}</div>        </td>
                <td class="dealRight">
                
                <table>
                    <tr>
                        <td>

				<img class="shadow dealMainImage" src="@{dealPhoto(deal.id)}"/>
                <h3>&{'view.deal.details'}:</h3>
       
                ${deal.description}    </td>
                        <td><div class="address">
                        <b>${deal.user.name}</b><br/>
                        ${deal.address.street} ${deal.address.houseNumber}<br/>
                ${deal.address.zipCode} ${deal.address.city}</div>
                <div id="map_canvas" style="width: 250px; height: 200px"></div></td>
                    </tr>
                </table>

                


                </td>    
        </tr>
    </table>
</div>

#{/else}